<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>数据源管理</title>
    <link rel="icon" href="/favicon1.ico" type="image/x-icon"/>
    <link rel="bookmark" href="/favicon1.ico" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="themes/icon.css">
    <link rel="stylesheet" type="text/css" href="css/demo.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script src="js/base64.js"></script>
</head>
<body>
<a href="index.html">返回主页</a>
<a href="dbCompare.html">数据源比对管理</a>
<div>
    <label>名称:</label>
    <input id="name" class="easyui-textbox" data-options="iconCls:'icon-none'" style="width:90px">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:100px"
       onclick="queryByCondition()">查询</a>
</div>
<table id="dg" class="easyui-datagrid" style="width:1200px;height:700px"
       title="数据源管理" iconCls="icon-table">
    <thead>
    <tr>
        <th field="id" width="50" align="left">ID</th>
        <th field="name" width="100" align="left">名称</th>
        <th field="gmtCreate" width="170" align="center">创建时间</th>
        <th field="gmtUpdate" width="170" align="center">修改时间</th>
        <th field="username" width="80" align="left">用户名</th>
        <th field="url" width="450" align="left">jdbcUrl</th>
    </tr>
    </thead>
</table>
    <div id="toolbar">
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newDatabase()">新增</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editDatabase()">编辑</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="copyDatabase()">复制</a>
    </div>

<div id="dlg" class="easyui-dialog" style="width:450px;height:280px;padding:10px 20px"
     closed="true" buttons="#dlg-buttons">
    <form id="fm" method="post">
        <input id="did" name="id" class="easyui-textbox" style="display: none">
        <div class="fitem">
            <label>驱动名:</label>
            <input name="driverClassName" class="easyui-textbox" style="width:150px;">
        </div>
        <br>
        <div class="fitem">
            <label>账号:</label>
            <input name="username"  class="easyui-textbox" style="width:150px;">
        </div>
        <br>
        <div class="fitem">
            <label>服务名:</label>
            <input name="name" class="easyui-textbox" style="width:100px;">
            &nbsp;
            <label>密码:</label>
            <input name="password" class="easyui-passwordbox" prompt="Password" style="width:100px;">
        </div>
        <br>
        <div class="fitem">
            <label>JdbcUrl:</label>
            <input name="url" class="easyui-validatebox"  required="true" style="width:300px;">
        </div>
    </form>
</div>
<div id="dlg-buttons">
    <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveDatabase()">保存</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
</div>
<script type="text/javascript">

    $('#dg').datagrid({
        pagination: true,
        pageSize: 20,
        pageNumber: 1,
        singleSelect:true,
        url:'/datasourceconf/page',
        queryParams:{
            name:$("#name").val()
        },

        method:'GET',
        toolbar: '#toolbar',
        loadFilter: function (data) {
            var result = {
                "total": data.data.total,
                "rows": data.data.records
            }
            return result;
        }
    });


    $(function () {
        //获取页面分页对象
        var p = $('#dg').datagrid('getPager');
        if (p) {
            $(p).pagination({
                beforePageText: '第',
                afterPageText: '页 共 {pages}页',
                displayMsg: '显示 {from}到{to} ,共 {total}条记录',
                onSelectPage: function (page, pageSize) {
                    queryData( page, pageSize);
                }
            });
        }
    });

    var queryByCondition = function () {
        //获取grid的当前分页信息
        var pageopt = $('#dg').datagrid('getPager').data("pagination").options;
        queryData(pageopt.pageNumber, pageopt.pageSize);
    }

    function queryData( pageNumberV, pageSizeV) {

        var data = {
            pageNum:pageNumberV,
            numPerPage:pageSizeV,
            masterSlave:$("#masterSlave").val(),
            env:$("#env").val(),
            name:$("#name").val()};
        var str = jQuery.param( data );
        var result = doGet('/datasourceconf/page?' + str);
        $('#dg').datagrid('loadData', result);
    }


    function doGet(url) {
        var result = null;
        $.ajax({
            url: url,
            type: 'get',
            async: false,
            headers: {
                'Content-Type': 'application/json;charset=utf8;'
            },
            success: function (data) {
                console.log(data);
                result = data;
            },
            error: function (data) {
                console.log("error");
                console.log(data);
            }
        });

        return result;
    }
    var url = '/datasourceconf/form';
    var method = 'POST';

    function newDatabase(){
        $('#dlg').dialog('open').dialog('setTitle','新建数据源');
        $('#fm').form('clear');
        $("#did").next().hide();
        url = '/datasourceconf/form';
    }

    function editDatabase(){
        var row = $('#dg').datagrid('getSelected');
        if (row){
            $('#dlg').dialog('open').dialog('center').dialog('setTitle','编辑数据源');
            $('#fm').form('load',row);
            $("#did").next().hide();
        }
        url = '/datasourceconf/form/update';
    }

    function copyDatabase(){
        var row = $('#dg').datagrid('getSelected');
        if (row){
            $('#dlg').dialog('open').dialog('center').dialog('setTitle','拷贝数据源');
            $('#fm').form('load',row);
            $("#did").next().hide();
        }
        url = '/datasourceconf/form';
    }

    function saveDatabase(){
        $('#fm').form('submit',{
            url: url,
            onSubmit: function(){
                return $(this).form('validate');
            },
            success: function(result){
                debugger;
                var result = eval('('+result+')');
                if (result.code!=0){
                    $.messager.show({
                        title: 'Error',
                        msg: result.msg
                    });
                } else {
                    $('#dlg').dialog('close');		// close the dialog
                    $('#dg').datagrid('reload');	// reload the user data
                }
            }
        });
    }

    //默认查询
    //queryData('', 1, 10);//查询框的值-第几页-每页多少条
</script>
</body>
</html>
